
import React, { Component } from 'react';
import { Input, Button, message, Select } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Table } from 'antd';
import axios from '../../../../../../util/axios';
import { connect } from "react-redux"

const { Option } = Select;
// import Mock from "mockjs"
class Goods_evaluation extends Component {
    state = {
        selectionType: "checkbox",
        data: [],
        loading: true,
        searchVal: '',
        searchShop: "",
        isShow: false,
        addData: true,
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
                width: "70px"
            },
            {
                key: "text",
                title: '商品信息',
                dataIndex: 'text',
                align: 'center',
            },
            {
                key: "name",
                title: '用户名称',
                dataIndex: 'name',
                align: 'center',
            },
            {
                key: "fping",
                title: '商品评分',
                dataIndex: 'fping',
                align: 'center',
                width: "130px"
            },
            {
                key: "sping",
                title: '服务评分',
                dataIndex: 'sping',
                align: 'center',
                width: "130px"
            },
            {
                key: "ptext",
                title: '评价内容',
                dataIndex: 'ptext',
                align: 'center',
            },
            {
                key: "htext",
                title: '回复内容',
                dataIndex: 'htext',
                align: 'center',
            },
            {
                key: "time",
                title: '评价时间',
                dataIndex: 'time',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => <div className='Goods_evaluationbtn'><Button type="primary" danger onClick={() => this.deleteItem(record)}>删除</Button> </div>
            },
        ],
        inpObj: {
            text: "",
            name: "",
            fping: "",
            sping: "",
            ptext: "",
            htext: "",
        }

    }
    componentDidMount() {
        this.getData()
    }
    //删除数据
    deleteItem = (record) => {
        axios.get(`/evaludetile?id=${record.id}`).then(res => {
            if (res.data.code === 200) {
                this.getData()
                message.success(res.data.msg)
            }
        })
    }
    //获取数据
    getData = () => {
        this.setState({
            loading: true
        })
        axios.get('/evaluation').then(res => {
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        data: res.data.data,
                        loading: false
                    })
                }, 400);
            }
        })
    }
    //用户搜索
    changeValue = (e) => {
        this.setState({
            searchVal: e.target.value,
            loading: false
        })
        if (!e.target.value) {
            this.getData()
        }
    }
    //商品搜索
    changeShop = (e) => {
        this.setState({
            searchShop: e.target.value,
            loading: false
        })
        if (!e.target.value) {
            this.getData()
        }
    }
    //提交商品搜索
    submitShop = () => {
        this.setState({
            loading: true
        })
        axios.get(`/evaludsearch?name=${this.state.searchShop}`).then(res => {
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        data: res.data.data,
                        loading: false
                    })
                    message.success(res.data.msg);
                }, 800);
            } else {
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                    message.error(res.data.msg);
                }, 800);
            }
        })
    }
    submitVal = () => {
        this.setState({
            loading: true
        })
        axios.get(`/evaludsearch?name=${this.state.searchVal}`).then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        data: res.data.data,
                        loading: false
                    })
                    message.success(res.data.msg);
                }, 800);
            } else {
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                    message.error(res.data.msg);
                }, 800);
            }
        })
    }
    //新增
    addShop = () => {
        this.setState({
            isShow: true,
            addData: true
        })
    }
    //编辑
    changeInp = (record) => {
        this.setState({
            isShow: true,
            addData: false,
            inpObj: {
                text: record.text,
                name: record.name,
                fping: record.fping,
                sping: record.sping,
                ptext: record.ptext,
                htext: record.htext
            }

        })
        console.log(record)
    }
    //确定
    submitChange = () => {
        if (this.state.addData) {
            this.setState({
                inpObj: {
                    ...this.state.inpObj,
                    id: 1
                }
            })
        } else {
            console.log(this.state.inpObj)
        }
        this.setState({
            isShow: false,
            inpObj: {
                text: "",
                name: "",
                fping: "",
                sping: "",
                ptext: "",
                htext: ""
            }
        })
    }
    //取消
    cancleIt = () => {
        this.setState({
            isShow: false,
            inpObj: {
                text: "",
                name: "",
                fping: "",
                sping: "",
                ptext: "",
                htext: ""
            }
        })
    }
    onFinish = (values) => {

    };
    //商品信息
    changeText = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                text: e.target.value,
            }
        })
    }
    //用户名称
    changeName = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                name: e.target.value,
            }
        })
    }
    //商品评分
    changeFping = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                fping: e.target.value
            }
        })
    }
    //服务评分
    changeSping = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                sping: e.target.value
            }
        })
    }
    //评价内容
    changePtext = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                ptext: e.target.value
            }
        })
    }
    //回复内容
    changeHtext = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                htext: e.target.value
            }
        })
    }


    render() {

        return (
            <div className='Goods_evaluation'>
                <div className="Goods_evaluation_box">
                    <div className="Goods_evaluation_searchInp">
                        <span>评价筛选：</span>
                        <Select defaultValue="lucy" style={{ width: 300 }} allowClear >
                            <Option value="lucy">已回复</Option>
                            <Option value="lucy">未回复</Option>
                        </Select>
                    </div>
                    <div className="Goods_evaluation_searchInp">
                        <span style={{ flexShrink: 0 }}>商品搜索：</span>  <Input placeholder="请输入商品名称" value={this.state.searchShop} onChange={this.changeShop} />
                        <Button type="primary" icon={<SearchOutlined />} onClick={this.submitShop}>
                            Search
                        </Button>
                    </div>

                    <div className="Goods_evaluation_searchInp">
                        <span style={{ flexShrink: 0 }}>用户名称：</span>  <Input placeholder="请输入用户名称" value={this.state.searchVal} onChange={this.changeValue} />
                        <Button type="primary" icon={<SearchOutlined />} onClick={this.submitVal}>
                            Search
                        </Button>
                    </div>
                </div>

                <div className="Goods_evaluation_delandAdd">
                    <Button onClick={this.addShop} type="primary">
                        添加商品规格
                    </Button>

                </div>
                <div className='Goods_evaluation_table'>
                    <Table
                        columns={this.state.columns}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        rowSelection='checkbox'
                        rowKey="id"
                        scroll={{ y: 540 }}
                    />

                </div>
                <div className="mGoods_evaluation_ask" style={{ display: this.state.isShow ? "block" : "none" }}>
                    <div className="Goods_evaluation_maskInner">
                        <h3>
                            {
                                this.state.addData ? "新增" : "编辑"
                            }
                        </h3>
                        <div className="Goods_evaluation_inpList">
                            <p>
                                <span>商品信息 :</span> <input type="text" value={this.state.inpObj.text} onChange={this.changeText} />
                            </p>
                            <p>
                                <span> 用户名称 : </span><input type="text" value={this.state.inpObj.name} onChange={this.changeName} />
                            </p>
                            <p>
                                <span>商品评分 : </span><input type="text" value={this.state.inpObj.fping} onChange={this.changeFping} />
                            </p>
                            <p>
                                <span> 服务评分 :</span> <input type="text" value={this.state.inpObj.sping} onChange={this.changeSping} />
                            </p>
                            <p>
                                <span>评价内容 : </span><input type="text" value={this.state.inpObj.ptext} onChange={this.changePtext} />
                            </p>
                            <p>
                                <span>回复内容 : </span><input type="text" value={this.state.inpObj.htext} onChange={this.changeHtext} />
                            </p>

                            <Button type="primary" onClick={this.submitChange}>确定</Button><Button onClick={this.cancleIt}>取消</Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect()(Goods_evaluation);